<template>
    <subBox v-loading="loading">
        <breadcrumb :title="'查看数据源'"></breadcrumb>
        <div class="mt20 add">
            <div class="add white-block">
                <div class="box-th">
                    <div class="form-common clearfix">
                        <div class="form-item">
                            <div class="form-item-label">数据源名称</div>
                            <div class="form-item-content">{{detail.dbDesc}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">数据库类型</div>
                            <div class="form-item-content">{{detail.dbType}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">服务器地址</div>
                            <div class="form-item-content">{{detail.dbIp}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">端口</div>
                            <div class="form-item-content">{{detail.dbPort}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">数据库名称</div>
                            <div class="form-item-content">{{detail.dbName}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">用户名</div>
                            <div class="form-item-content">{{detail.dbUser}}</div>
                        </div>
                        <div class="form-item">
                            <div class="form-item-label">密码</div>
                            <div class="form-item-content">{{detail.dbPasswd}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </subBox>

</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'

    export default {
        data() {
            return {
                loading: false,
                form: {},
                option: [],
                value: '',
                rules: {},
                id: '',
                detail: {}
            }
        },
        mounted() {
            if (this.$route.query.id) this.id = this.$route.query.id
            this.getList()
        },
        methods: {
            getList() {
                this.$http.get('/rdDbDict/selectOneDatabase', {
                    dbId: this.id
                }).then(result => {
                    if (result.success) {
                        this.detail = result.data
                    }
                })
            }
        },
        components: {
            subBox,
            breadcrumb,
            tableExample
        }
    }
</script>

<style scoped lang="less">
    .add {
        min-height: calc(100% - 70px);
        max-height: 100%;
        background-color: #fff;

        .box-th {
            margin-left: 40%;

            .form-common {
                margin-top: 10%;
            }

            .title {
                overflow: hidden;
                line-height: 30px;

                span {
                    padding: 10px;
                    float: left;
                    color: #999;
                    font-size: 16px;
                }

                .p {
                    float: left;
                    margin-left: 40px;
                    font-size: 16px;
                    padding: 10px;
                }

                .people {
                    margin-left: 60px;

                }

                .btn {
                    border-radius: 0;
                    margin-left: 20px;
                }
            }

        }
    }

    .form-common {
        margin-top: 3rem;

        .el-form-item {
            width: 40%;
            vertical-align: top;
            margin-left: 27%;
        }

        .btn {
            margin-top: 3rem;
        }
    }
</style>
